import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { LongForWrapper } from './style';
import ScrollView from '@/base-ui/scroll-view';
import SectionHeader from '@/components/section-header';

const HomeLongFor = memo((props) => {
  const { infoData } = props
  return (
    <LongForWrapper>
      <SectionHeader title={infoData.title} subTitle={infoData.subtitle} />
      <div className="list">
        <ScrollView>
          {infoData.list.map(item => (
            <div key={item.city} className='inner'>
              <div className="imgWrapper">
                <img src={item.picture_url} alt="" />
                <div className="imgCover">
                  <div className="info">
                    <div className='city'>{item.city}</div>
                    <div className='price'>均价 {item.price}</div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </ScrollView>
      </div>
    </LongForWrapper>
  )
})

HomeLongFor.propTypes = {
  infoData: PropTypes.object
}

export default HomeLongFor